<template>
 <div style="width: 100%;position: relative;margin-top: 10px;">
    <div v-if="data.fromAccount!=myAccount" style="background-color: rgb(242,242,242);border-radius: 2px 10px 10px 10px;width: auto;padding: 10px 10px;display: inline-block;user-select: text;max-width: 60%;word-break: break-all;" :style="{padding:data.type==2?'0 0':'10px 10px'}">
        <span v-if="data.type==1" style="user-select: text;">{{ data.content }}</span>
        <img v-if="data.type==2" style="width: 300px;height: auto;border-radius: 2px 10px 10px 10px;" :src="data.content" alt="" @click="previewImage(data.content)">
    </div>
    <div v-if="data.fromAccount==myAccount" style="text-align: right;">
        <div style="display: inline-block;background-color: rgb(0,120,215);border-radius: 10px 2px 10px 10px;color: white;max-width: 60%;padding: 10px 10px;user-select: text;word-break: break-all;text-align: left !important;" :style="{padding:data.type==2?'0 0':'10px 10px'}">
            <span v-if="data.type==1" style="user-select: text;">{{ data.content }}</span>
            <img v-if="data.type==2" style="width: 300px;height: auto;border-radius: 10px 2px 10px 10px;" :src="data.content" alt="" @click="previewImage(data.content)">
        </div>
    </div>
 </div>
</template>

<script>

export default{
  data(){
    return{
      
    }
  },
  mounted(){

  },
  methods:{
    previewImage(url){
        window.open(url)
    }
  },
  props:{
    data:undefined,
    myAccount:undefined
  },
}
</script>

<style scoped>

</style>